<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;background-color: #fff;height: 450px;">

    <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-block">
            <input type="text" name="contact" required lay-verify="required" autocomplete="off" class="layui-input"
                   placeholder="如：QQ:302394446" value="{if $customer}{$customer.contact}{/if}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">工作时间</label>
        <div class="layui-input-block">
            <input type="text" name="working_time" lay-verify="required" autocomplete="off" class="layui-input" value="{if $customer}{$customer.working_time}{/if}" placeholder="如：08:00 ~ 18:00">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">二维码</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" id="cover" style="width: 248px;">
                <div id="cover_head" class="{if $customer}layui-hide{/if}">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
                <div class="{if !$customer}layui-hide{/if}" id="uploadDemoView">
                    <img src="{if $customer}__IMG_DOMAIN__{$customer.qrcode}{/if}" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
                    <input type="hidden" name="qrcode" value="{if $customer}{$customer.qrcode}{/if}">
                </div>
            </div>

            <div class="layui-form-mid layui-word-aux" style="float:unset;">推荐分辨率：200 x 200</div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="customer_submit">提交</button>
        </div>

    </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,layer = layui.layer
            ,form = layui.form
            ,upload = layui.upload;

        upload.render({
            elem: '#cover'
            ,accept:'images'
            ,acceptMime: 'image/jpeg, image/png'
            ,url: '/tool/uploadPic' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                if (res.code !== 0){
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
                    layui.$('#uploadDemoView').find('input').val(res.data.filePath);
                    layui.$('#cover_head').addClass('layui-hide');
                    console.log(res)
                }else {
                    layer.msg(res.msg);
                }
            }
        });

        form.on('submit(customer_submit)', function(data){

            $.ajax({
                url:"{:url('Website/customer')}",
                type:"post",
                dataType: "json",
                data:data.field,
                async:true,
                success: function(rs){
                    if(rs['code'] == 100){

                        layer.msg(rs['msg'],function () {
                            layer.close(); //关闭弹层
                        });

                    }else{
                        layer.msg(rs['msg']);
                    }
                    return false;
                }
            });
        });

    });
</script>
</body>
</html>